<!-- tab2 -->
<template>
  <div class="monthly-tab2">
    <div id="tab4-chart1"></div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from "vue";
import * as echarts from "echarts"; //引入图表库
export default {
  name: "tab4",
  setup() {
    const data = reactive({
      dataset: {
        dimensions: ["product", "2015", "2016", "2017"],
        source: [
          { product: "Matcha Latte", 2015: 43.3, 2016: 85.8, 2017: 93.7 },
          { product: "Milk Tea", 2015: 83.1, 2016: 73.4, 2017: 55.1 },
          { product: "Cheese Cocoa", 2015: 86.4, 2016: 65.2, 2017: 82.5 },
          { product: "Walnut Brownie", 2015: 72.4, 2016: 53.9, 2017: 39.1 },
        ],
      },
    });
    onBeforeMount(() => {});
    const echartInit = () => {
      console.log("初始化");
      //饼图
      var myChart1 = echarts.init(document.getElementById("tab4-chart1"));
      let option1 = {
        title: {
          text: "主要产品销量占比",
          top: 10,
          left: 10,
          textStyle: {
            color: "#485187",
            fontSize: "14",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          type: "scroll",
          bottom: 10,
          data: (function () {
            var list = [];
            for (var i = 1; i <= 28; i++) {
              list.push(i + 2000 + "");
            }
            return list;
          })(),
        },
        visualMap: {
          top: "middle",
          right: 10,
          color: ["red", "yellow"],
          calculable: true,
        },
        radar: {
          indicator: [
            { text: "复古凳子", max: 400 },
            { text: "智能家居", max: 400 },
            { text: "老人床椅", max: 400 },
            { text: "不粘锅", max: 400 },
            { text: "Chome桌子", max: 400 },
          ],
        },
        series: (function () {
          var series = [];
          for (var i = 1; i <= 28; i++) {
            series.push({
              name: "销量",
              type: "radar",
              symbol: "none",
              lineStyle: {
                width: 1,
              },
              emphasis: {
                areaStyle: {
                  color: "rgba(0,250,0,0.3)",
                },
              },
              data: [
                {
                  value: [
                    (40 - i) * 10,
                    (38 - i) * 4 + 60,
                    i * 5 + 10,
                    i * 9,
                    (i * i) / 2,
                  ],
                  name: i + 2000 + "",
                },
              ],
            });
          }
          return series;
        })(),
      };
      myChart1.setOption(option1);
      // option2.series.data = data.optionData2;
    };
    onMounted(() => {
      echartInit();
    });
    const refData = toRefs(data);
    return {
      ...refData,
      echartInit,
    };
  },
};
</script>
<style scoped lang="scss">
.monthly-tab2 {
  #tab4-chart1 {
    width: 100%;
    height: 300px;
    background-color: #fff;
    margin: 10px 0;
    border-radius: 5px;
  }
}
</style>
